simplebar-core

What is simplebar-core?

The simplebar-core npm package provides a lightweight and simple way to create custom scrollbars for your web applications. It allows you to replace the default browser scrollbar with a custom one that is more visually appealing and can be styled to match your application's design.

What are simplebar-core's main functionalities?

Initialize SimpleBar

This feature allows you to initialize SimpleBar on a specific DOM element. The custom scrollbar will be applied to the element, replacing the default browser scrollbar.

const SimpleBar = require('simplebar-core');
const myElement = document.getElementById('myElement');
new SimpleBar(myElement);

Custom Styling

This feature allows you to customize the appearance of the scrollbar using CSS. In this example, the scrollbar is styled with a custom color.

const SimpleBar = require('simplebar-core');
const myElement = document.getElementById('myElement');
new SimpleBar(myElement, { autoHide: false });
// Add custom CSS to style the scrollbar
const style = document.createElement('style');
style.innerHTML = `
  .simplebar-scrollbar::before {
    background-color: #3498db;
  }
`;
document.head.appendChild(style);

Dynamic Content

This feature demonstrates how to handle dynamic content within the SimpleBar container. After adding new content, you can call the `recalculate` method to update the scrollbar.

const SimpleBar = require('simplebar-core');
const myElement = document.getElementById('myElement');
const simpleBarInstance = new SimpleBar(myElement);
// Add dynamic content
myElement.innerHTML += '<p>New content added dynamically</p>';
// Recalculate the scrollbar
simpleBarInstance.recalculate();

Other packages similar to simplebar-core

perfect-scrollbar

Perfect Scrollbar is a similar package that provides custom scrollbars for web applications. It is highly customizable and supports various features like auto-hide, smooth scrolling, and more. Compared to simplebar-core, Perfect Scrollbar offers more configuration options but may be slightly heavier in terms of performance.

react-custom-scrollbars

React Custom Scrollbars is a package specifically designed for React applications. It provides custom scrollbars with a simple API and supports various customization options. Compared to simplebar-core, React Custom Scrollbars is tailored for React and offers better integration with React components.

README

SimpleBar Core

• 🐦 Follow me on Twitter! or Mastodon!
• 👨‍💻 I'm available for hire! Reach out to me!
• 🚧 Check out my new project Scroll Snap Carousel!

This is the core library. You should not use it directly. If you want the vanilla plugin, see SimpleBar.